<template>
  <view class="flex-col justify-start page">
    <!-- 打卡统计信息 -->
    <view class="flex-row justify-between items-center stats-section">
      <view class="flex-col items-center">
        <text class="font_3">{{ streakDays }}</text>
        <text class="font_2">连续打卡天数</text>
      </view>
      <view class="flex-col items-center">
        <text class="font_3">{{ totalCheckinDays }}</text>
        <text class="font_2">总打卡天数</text>
      </view>
    </view>

    <!-- 日历组件 -->
    <calender
      :punched-dates="markedDates"
      @select="handleDateSelect"
      class="calendar-section"
    />
  </view>
</template>

<script>
import Calender from '../../components/Calender/Calender.vue'; // 导入 Calender 组件

export default {
	components: {
		Calender // 注册组件
	},
	data() {
		return {
			streakDays: 0,
			totalCheckinDays: 0,
			markedDates: [],
			isLoading: false,
		};
	},
	methods: {
		// 获取打卡记录
		fetchCheckinData() {
			this.isLoading = true;
			this.$request({
				url: '/train/record/user/get/',
				method: 'GET',
				data: {
					batch_num: 1, // 默认请求第一页
					batch_size: 100, // 每页100条数据
				},
				success: (response) => {
					if (response.statusCode === 200) {
						const { streak_days, total_checkin_days, records } = response.data;
						this.streakDays = streak_days;
						this.totalCheckinDays = total_checkin_days;

						// 格式化打卡日期
						this.markedDates = records.map(record => record.create_date);
					} else {
						console.error('获取打卡数据失败');
					}
				},
				fail: (error) => {
					console.error('请求失败', error);
				},
				complete: () => {
					this.isLoading = false;
				},
			});
		},
		// 处理日历日期选择事件
		handleDateSelect(date) {
			console.log('选中的日期:', date);
		},
	},
	mounted() {
		this.fetchCheckinData();
	},
};
</script>

<style scoped lang="css">
.page {
  padding: 30rpx;
  background-color: #f5f5f5;
}

.stats-section {
  margin-bottom: 30rpx;
}

.font_3 {
  font-size: 48rpx;
  font-weight: bold;
  color: #000000;
}

.font_2 {
  font-size: 28rpx;
  color: #666666;
}

.calendar-section {
  margin-top: 20rpx;
}
</style>